<template>
	<view>
		<view class="ball">
			<u-navbar title="话费充值" back-icon-color="#fff" title-color="#fff" :border-bottom="false" :background="{background: 'transparent'}"></u-navbar>
		</view>

		<view class="phone padding">
			<view class="line margin-top padding-lr">
				<input type="text" maxlength="11" class="text-bold num text-xxl" v-model="phone" @input="inputing" @focus="focus=true"
				 @blur="loseFocus" />
				<!-- <image class="img" src="../../static/images/concat.png" mode="widthFix"></image> -->
			</view>
			<view class="line margin-top padding-lr">
				<view class="text-gray text-sm">{{area.prov+area.city+area.type || '未知'}}</view>
			</view>

			<view class="mobile-list line margin-top padding flex flex-direction" v-show="focus&&filter.length">
				<view v-for="i in filter" :key="i.id" class="margin-top-sm padding-left mobile" @click="setPhone(i.number)">{{i.number}}</view>
			</view>
		</view>

		<!-- 面额 -->
		<view class="main-block padding text-center">
			<view class="item" v-for="i in cardnum" :key="i.id" :class="{ active: i.id == selected }" @click="selected = i.id">
				<view class="title text-bold text-lg">{{i.price}}元</view>
				<view class="info margin-top-xs text-xs">售价 {{i.actual_price}} 元</view>
			</view>
		</view>

		<view class="margin-top padding-tb padding-lr-xl">
			<my-btn class="block round" bg="linear-gradient(90deg, #dcbf86 0%,#c18a31 100% )" @click.native="paymentShow=true">立即充值</my-btn>
			<my-btn class="block round" bg="#fff" color="#666666" @click.native="$goto('/pages/mine/record?type=mobile')">充值记录</my-btn>
		</view>

		<!-- 支付 -->
    <my-payment
      :show="paymentShow"
      @close="paymentShow = false"
      payUrl="/card/mobile/pay"
      :params="{ mobile: phone, id: selected }"
      @success="$goto('/pages/shop/paysuccess?type=mobile')"
    ></my-payment>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selected: '',
				phone: '',
				cardnum: [],
				mobile: [],
				filter: [],
				area: [],
				orderInfo: '',
				focus: false,
				paymentShow: false
			};
		},
		onShow() {
			this.getMobile();
		},
		watch: {
			phone() {
				if (this.phone.length == 11) {
					this.getArea(this.phone)
				}
			}
		},
		methods: {
			getMobile() {
				this.$u.get('/card/mobile').then(res => {
					this.mobile = res.data.result.mobile
					this.phone = this.mobile[0].number || ''
					this.cardnum = res.data.result.cardnum
					this.selected = this.cardnum[0].id
				})
			},
			loseFocus() {
				setTimeout(() => {
					this.focus = false
				}, 100)
			},
			inputing() {
				if (this.phone) {
					let arr = this.mobile.filter(item => {
						if (item.number.indexOf(this.phone) != -1) {
							return item
						}
					})
					this.filter = arr
				} else {
					this.filter = this.mobile
				}
			},
			setPhone(phone) {
				this.phone = phone
			},
			getArea(phone) {
				this.$u.get('/card/mobile/segment/' + phone).then(res => {
					this.area = res.data.result.mobile
				})
			},
		}
	}
</script>

<style lang="scss">
	.navbar {
		position: relative;
		z-index: 5;
	}

	.ball {
		background-image: url(../../static/images/bg3.png);
		height: 360rpx;
		background-size: 100% auto;
		background-repeat: no-repeat;
	}

	.mobile-list {
		background-color: #fff;
		left: 0;
		top: 0;
		transform: translateY(80rpx);
		max-height: 340rpx;
		overflow: hidden;
		width: 100%;
		position: absolute;
		border-radius: 20rpx;
		border: 1px solid rgba(179, 199, 230, 0.3);
		border-top: none;

		.mobile {
			width: 100%;
			font-weight: bold;
			font-size: 44rpx;
			letter-spacing: 2rpx;
		}
	}

	.phone {
		width: 690rpx;
		height: 262rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 20rpx;
		margin: 0 auto;
		margin-top: -160rpx;
		box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(205, 175, 113, 0.46);
		position: relative;
		z-index: 3;

		.line {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.num {
				letter-spacing: 2rpx;
			}

			.img {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}

	.main-block {
		display: flex;
		flex-flow: row wrap;
		padding-left: 32rpx;

		.item {
			margin: 14rpx;
			width: 200rpx;
			height: 128rpx;
			background: rgba(255, 255, 255, 1);
			border: 2rpx solid #BEBEBE;
			border-radius: 10rpx;
			box-sizing: border-box;
			display: flex;
			flex-flow: column;
			justify-content: center;
			transition: all 0.3s;
			box-sizing: border-box;

			.info {
				color: gray;
			}

			&.active {
				border: 4rpx solid #DFC593;
			}
		}
	}
</style>
